<script setup lang="ts">
import BackGround from "./Regin/index.vue";
import Logo from "./Logo/index.vue"
import { ref } from "vue";
const value = ref('');
</script>

<template>
 <div class="star-sky">
    <div class="star" style="top:12%; left:34%; animation-delay: .3s;"></div>
    <div class="star" style="top:17%; left:42%; animation-delay: 1.2s;"></div>
    <div class="star" style="top:25%; left:72%; animation-delay: 2s;"></div>
    <div class="star" style="top:10%; left:67%; animation-delay: 3s;"></div>
    <div class="star" style="top:26%; left:60%; animation-delay: 1s;"></div>
    <div class="star" style="top:27%; left:29%; animation-delay: 1.6s;"></div>
    <div class="star" style="top:18%; left:17%; animation-delay: 2s;"></div>
    <div class="star" style="top:24%; left:56%; animation-delay: 2.8s;"></div>
    <div class="star" style="top:16%; left:31%; animation-delay: 1s;"></div>
    <div class="star" style="top:20%; left:46%; animation-delay: 3.2s;"></div>
    <div class="star" style="top:27%; left:80%; animation-delay: 1.6s;"></div>
    <div class="star" style="top:33%; left:66%; animation-delay: 2s;"></div>
    <div class="star" style="top:12%; left:45%; animation-delay: 1.4s;"></div>
    <div class="star" style="top:18%; left:26%; animation-delay: 2,4s;"></div>
    <div class="star" style="top:20%; left:13%; animation-delay: 1s;"></div>
    <div class="star" style="top:10%; left:20%; animation-delay: .5s;"></div>
    <div class="star" style="top:28%; left:90%; animation-delay: 1.3s;"></div>
    <div class="star" style="top:20%; left:87%; animation-delay: 1.4s;"></div>

    <div class="metor" style="animation-delay: 0s; left:90%"></div>
    <div class="metor" style="animation-delay: 1.3s; left:85%"></div>
    <div class="metor" style="animation-delay: .9s; left:67%"></div>
    <div class="metor" style="animation-delay: 1.1s; left:100%"></div>
    <div class="metor" style="animation-delay: 3s; left:110%"></div>
    <div class="metor" style="animation-delay: .4s; left:140%"></div>
    <div class="metor" style="animation-delay: 2s; left:120%"></div>
    <div class="metor" style="animation-delay: 1.2s; left:138%"></div>
    <div class="metor" style="animation-delay: 1.9s; left:150%"></div>
    <div class="metor" style="animation-delay: .8s; left:147%"></div>
    <div class="metor" style="animation-delay: 1s; left:161%"></div>
    <Logo/>
    <BackGround/>
 </div>
</template>

<style scoped>
.star-sky{
   position: fixed;
   inset: 0;
   /* pointer-events: none; */
   width: 100vw;
   height:100vh;
   background: radial-gradient(ellipse at bottom,#1b2735 0%,#090a0f 100%);
}


/* 星星 */
.star{
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: teinkle 3s infinite;
}

@keyframes teinkle{
    0%,100%{opacity: 0.2; transform: scale(0.8);}
    50% {opacity:1;transform: scale(1.2);}
}

/* 流星 */
.metor{
    position: absolute;
    top:-10%;
    left:60%;
    width:2px;
    height: 120px;
    background:linear-gradient(to bottom,rgba(255,255,255,0.8),transparent);
    animation:shoot 6s linear infinite;
    transform: rotate(45deg);
}
@keyframes shoot{
    0% {transform: translateY(-100vh) translateX(0) rotate(45deg); opacity:1;}
    100% {transform: translateY(100vh) translateX(-100vw) rotate(45deg); opacity: 0;}
}

</style>